z<template> 
    <div class="other-person-view">
      <!-- 引入公共头部导航栏 -->
      <div class="other-person-container">
        <h3 class="section-title">个人咨询</h3>
        <!-- 内容区域 -->
        <div class="content-area">
          <div class="home-header">
            <h2 class="cards-title">我想知道</h2>
            <p class="cards-subtitle">选择您感兴趣的服务</p>
          </div>
          
          <div class="cards-grid">
            <div 
              v-for="(card, index) in cards" 
              :key="index" 
              class="card-item" 
              @click="navigateToRoute(card)"
            >
              <div class="card-icon">
                <span v-if="index === 0">🏥</span>
                <span v-else-if="index === 1">📊</span>
                <span v-else-if="index === 2">🌿</span>
                <span v-else-if="index === 3">👥</span>
                <span v-else-if="index === 4">👤</span>
                <span v-else-if="index === 5">☁️</span>
                <span v-else>📋</span>
              </div>
              <div class="card-content">
                <div class="card-title">{{ card.title }}</div>
                <div class="card-description">{{ card.description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup> 
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 卡片数据
const cards = ref([
  {
    id: 1,
    title: '项目预测',
    description: '预测项目相关信息',
    route: '/health',
    params: { categoryId: 7 }
  },
  {
    id: 2,
    title: '工作事业',
    description: '工作与事业相关咨询',
    route: '/health',
    params: { categoryId: 8 }
  },
  {
    id: 3,
    title: '情感咨询',
    description: '情感问题相关咨询',
    route: '/health',
    params: { categoryId: 9 }
  },
  {
    id: 4,
    title: '公关审核',
    description: '公关与审核相关服务',
    route: '/health',
    params: { categoryId: 10 }
  },
  {
    id: 5,
    title: '中医诊断及体检',
    description: '中医诊断与体检服务',
    route: '/health',
    params: { categoryId: 19 }
  },
  {
    id: 6,
    title: '学业考研',
    description: '学业与考研相关咨询',
    route: '/health',
    params: { categoryId: 20 }
  }
]);

// 导航到指定路由
const navigateToRoute = (card) => {
  router.push({
    path: card.route,
    query: card.params
  });
};
</script>

<style lang="less" scoped>
.other-person-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  
}

.other-person-container {
  flex: 1;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-weight: 500;
}

.content-area {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.home-header {
  text-align: center;
  margin-bottom: 30px;
}

.cards-title {
  font-size: 1.8rem;
  color: #3f51b5;
  margin-bottom: 8px;
}

.cards-subtitle {
  font-size: 1rem;
  color: #666;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(63, 81, 181, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.card-description {
  font-size: 0.9rem;
  color: #666;
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}
</style>